<template>
	<scroll-view class="page" ref="scrollView" scroll-y="true" :scroll-top="scrollTop"   @scroll="scroll">
	   <view class="step b-bg step1" v-show="step == 1">
			<view class="btn-go btn-go" @tap="goIndex"></view>
			<view class="btn-go btn-go3" @tap="goShowBook"></view>
			<view class="areBox">
				<view class="item" v-for="(item,index) in areaArray"  @tap="changeArea(item.value)" :class="{'active':curEreId == item.value}" :key="index">
					{{item.text}}
				</view>
			</view>
		</view>
		<view class="step step2Wrap" v-show="step == 2">
			<headnav leftText="参赛报名" cik='custerm' @custremCik='cuCik'></headnav>
			<view class="goSept" @tap="goSept">
				<重新选择参赛地区
			</view>
			<view class="formbox">
				<!-- <view class="groups">
					<view class="title">
						参赛分组
					</view>
					<view class="tags">
						<view class="tag" v-for="(item,index) in tags" @tap="changeRole(index)" :class="{active: curRole == index}" :key="index">
							 {{item.text}}
						</view>	
					</view> 
				</view> -->
				<view class="inputs">
					<view class="title">
						参与者信息
					</view>
					<view class="add-form">
							<view class="add-row">
									<view class="ad-label">
										<text class="icon-warning">*</text>
										姓&nbsp;&nbsp;&nbsp;&nbsp;名
									</view>
									<view class="ad-inputBox">
										<uni-easyinput type="text"
										:clear="false"
										clearSize='0'
										v-model="form_data.username"
										placeholder="请输入姓名" />
									</view>
							 </view>
						<view class="add-row">
									<view class="ad-label">
										<text class="icon-warning">*</text>
										学校/单位
									</view>
									<view class="ad-inputBox">
										<uni-easyinput type="text"
										:clear="false"
										clearSize='0'
										v-model="form_data.company"
										placeholder="输入全称" />
									</view>
						</view>
						<view class="add-row">
									<view class="ad-label">
										<text class="icon-warning">*</text>
										手机号
									</view>
									<view class="ad-inputBox">
										<uni-easyinput type="text"
										:clear="false"
										clearSize='0'
										v-model="tel"
										:disabled="true"
										placeholder="输入手机号" />
									</view>
						</view>
						<view class="add-row school" style="margin-bottom: 15rpx;">
									<view class="ad-label">
										邮&nbsp;&nbsp;&nbsp;&nbsp;箱
									</view>
									<view class="ad-inputBox">
										<uni-easyinput type="text"
										:clear="false"
										clearSize='0'
										v-model="form_data.email"
										placeholder="输入邮箱" />
									</view>
						</view>
					</view>
					<view class="btnWrap">
						<view class="bottomBtn" @tap='submit()'>
							提交报名
						</view>
					</view>
				</view>
			</view>
		</view>
		<loginD ref='loginx'></loginD>
	</scroll-view>
</template>

<script>
	import mixin from '../../util/mixin.js';
	import BASE_URL from '../../util/path.js';
	const Email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
	export default {
		mixins:[mixin],
		data() {
			return {
				curEreId:-1,
				curRole:0,
				step:1,
				scrollTop:0,
				type:'edit',
				tags:[
					{value:1,text:'大学生组'},
					{value:2,text:'社会组'}
				],
				form_data:{
					username:'',
					company:'',
					email:'',
					province:'',
					role_id:BASE_URL.role_id
				},
				areaArray:[
					{value:'420000',text:'湖北'},
					{value:'310000',text:'上海'},
					{value:'320000',text:'江苏'},
					{value:'340000',text:'安徽'},
					{value:'360000',text:'江西'},
					{value:'430000',text:'湖南'},
					{value:'510000',text:'四川'},
					{value:'530000',text:'云南'},
					{value:'540000',text:'西藏'},
					{value:'820000',text:'澳门'}
				]
			};
		},
		onShow() {
			// this.getUserInfo().then(() => {
				
			// })
		},
		onLoad(options) {
			// company"学校"
			// email"xxmqzx@sohu.com"
			// mobile"13100688807"
			// nickname""
			// num3
			
			// province0
			this.getUserInfo().then((item) => {
				if (options.type == 'edit') {
					 this.type = 'edit';
					 this.form_data.username = item.nickname;
					 this.form_data.mobile = item.mobile;
					 this.form_data.province = item.province;
					 this.form_data.email = item.email;
					 this.form_data.company = item.company;
					 this.step = 2;
				} else {
					if(this.button_type == 3 || this.button_type == 4 || this.button_type == 5) {
						uni.navigateTo({
						  url:'/pages/editor/editor'
						})
					}
				}
			});
		},
		computed: {
			getMobile() {
				return this.mobile;
			}
		},
		methods: {
			cuCik() {
				if(this.type == 'edit') {
				    uni.navigateBack();
				} else {
					this.step = 1;
				}
				
			},
			callbackLogin() {
				this.getUserInfo().then(()=>{
					if(this.button_type == 3) {
						uni.r({
							url:'/pages/upLoadhs/upLoadhs'
						})
					}
					if(this.button_type == 4) {
						uni.navigateTo({
							url:'/pages/index/index'
						})
					}
				});
			},
			goSept() {
				this.step = 1;
			},
			scroll(e){
				this.scrollTop = e.detail.scrollTop;
			},
			changeRole(index) {
				this.curRole = index;
				this.form_data.role_id = this.tags[this.curRole].value;
			},
			changeArea(id) {
				const token = uni.getStorageSync('token');
				if(token) {
					this.curEreId = id;
					this.form_data.province = id;
					this.scrollTop = 0;
					this.step = 2;
				} else {
					 this.setShowLogin(true);
				}
				
			},
			verifyform(){
			  let bl =  true;
			if(this.form_data.email && !Email.test(this.form_data.email)) {
				  this.toast('请输入正确的邮箱')
				  bl =  false;
				  return bl
			}	
		
			  if(!this.form_data.username) {
				 this.toast('请输入姓名')
				  bl =  false;
				  return bl
			  }
			  if(!this.form_data.company) {
				  this.toast('请输入学校')
				  bl =  false;
				  return bl
			  }
			  
			  if(!this.form_data.province) {
					  this.toast('请选择区域')
					  bl =  false;
					  return bl
			  }
			  
			  return bl;
			},
			async submit() {
				const bl = this.verifyform();
				if(bl) {
					const post_data = {
						mobile: this.tel,
						...this.form_data
					}
					const res = await this.$http({
						  url:'user/info',
						  method:'post',
						  data:post_data 
					})
				   if(res.status_code == 200) {
					   this.toast('操作成功');
					   if(this.type == 'edit') {
						  uni.redirectTo({
						  	 url:'/pages/editor/editor'
						  }) 
					   } else {
						   uni.redirectTo({
						   	 url:'/pages/upLoadhs/upLoadhs'
						   })
					   }
				   }
				}
			}
		}
	}
</script>

<style lang="scss">
  .page {
	  width: 100%;
	  height: 100%;
	 
  }
  
  .formbox {
	  padding: 34rpx;
  }
  
  .goSept {
	  height: 100rpx;
	  background-color: #f1e1d2;
	  color:#f4563c;
	  line-height: 100rpx;
	  padding-left: 46rpx;
	  font-size: 30rpx;
  }
    .btnWrap {
		padding-top: 136rpx;
		display: flex;
		justify-content: center;
		.btnBox {
			@include bottomBtn
		}
	}
  
	.add-form {
		background-color: #fff;
		 border-radius: 14rpx;
	   padding: 36rpx 36rpx 36rpx 0;
	   .add-row {
		   background-color: #fff;
		   display: flex;
		   border-radius: 16rpx;
		   margin-bottom: 16px;
		   .ad-label {
			 width: 200rpx;
			 height: 100rpx;
			 font-size: 30rpx;
			 @include center();
		   }
		   .ad-inputBox {
			 width: 544rpx;
			 background-color: #f7f7f7;
			 height: 100rpx;
			 border-radius: 14rpx;
			 font-size: 32rpx;
			 .uni-input-placeholder {
				 font-size: 30rpx;
			 }
			 @include center();
		   }
	   }
	}  
  .step {
	  width: 100%;
	  min-height: 100%;
	  position: relative;
	  padding-top: 820rpx;
	  padding-bottom: 266rpx;
	  &.step1 {
		  height: 1800rpx;
	  }
	  &.step2Wrap {
		  padding-top: $uni-pading;
	  	  left:0;
	  	  right: 0;
	  	  bottom: 0;
	  	  background-color: #fff;
	  	  z-index: 9;
		  background-color: #f7f7f7;
	  	  overflow-y: auto;
	  }
  }
  
  
	  
  .b-bg {
	  background-image: url('@/static/img/singUP.jpg');
	  background-size: 100% auto;
	  background-position: 0 0;
	  background-repeat: no-repeat;
  }
  
  .areBox {
	  margin-left: 25rpx;
	  // height: 366rpx;
	  overflow: hidden;
	  width: 705rpx;
	  background-color: #fffffc;
	  background-image: url('@/static/img/kuang.png');
	  background-repeat: no-repeat;
	  background-position:0 bottom;
	  background-size: 704rpx auto;
	  padding-left: 7rpx;
  }
  .item {
	  float: left;
	  width: 184rpx;
	  height: 135rpx;
	  background: #f8f4eb;
	  border-radius: 10rpx;
	  margin-left: 34rpx;
	  margin-bottom: 34rpx;
	  font-size: 30rpx;
	  @include center();
	  &.active {
		  color:#eaa057;
		  border:2px solid #eaa057;
	  }
  }
	  
  
  .inputs {
	  .title {
		  margin-bottom: 26rpx;
		  font-weight: bold;
	  }
	  .bottomBtn {
		  
		  @include bottomBtn
	  }
  }
  
  
  .formbox {
	  padding: 34rpx;
	  .groups {
	  	  background-color: #fff;
		  border-radius: 16rpx;
		  padding: 26rpx;
		  margin-bottom: 30rpx;
		  .title {
			  font-size: 30rpx;
			  margin-bottom: 23rpx;
			  font-weight: bold;
		  }
		  .tags{
			  display: flex;
			  .tag {
				  width: 194rpx;
				  height: 68rpx;
				  border-radius: 12rpx;
				  background-color: #f1e1d2;
				  color:#fff;
				  margin-right: 30rpx;
				  font-size: 28rpx;
				  &.active {
					  background-color: #eaa057;
					  color:#fff;
				  }
				  @include center();
			  }
		  }
	  }
  }
  
</style>
